<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>员工表格</title>
    </head>
    <body>
        <input type="text" placeholder="请输入员工姓名" id="i1">
        <input type="text" placeholder="请输入员工工资" id="i2">
        <input type="text" placeholder="请输入员工岗位" id="i3">
        <button onclick="addEmp()">添加员工</button>
        <hr>
        <table border="1">
            <caption>员工表</caption>
            <tr>
                <th>姓名</th>
                <th>工资</th>
                <th>岗位</th>
            </tr>
        </table>

        <script>
            function addEmp(){
                let uName = document.getElementById("i1").value;
                let uSalary = document.getElementById("i2").value;

                //判断输入内容是否是数字
                if (isNaN(uSalary)){
                    alert('工资请输入数字');
                    return;
                }


                let uJob = document.getElementById("i3").value;
                //创建对应的tr的3个td元素
                let tr = document.createElement('tr');
                let nameTd = document.createElement('td');
                let salaryTd = document.createElement('td');
                let jobTd = document.createElement('td');
                //把获取到的数据填充到单元格中：
                nameTd.innerHTML = uName;
                salaryTd.innerHTML=uSalary;
                jobTd.innerHTML=uJob;
                //把准备好的3个td装到tr里
                tr.append(nameTd,salaryTd,jobTd);
                //把准备好的这一行数据tr对象装入table中
                let table = document.querySelector("table");
                table.append(tr);
                //每个输入框的数据用完以后需要清空
                document.getElementById("i1").value = "";
                document.getElementById("i2").value = "";
                document.getElementById("i3").value = "";
            }

        </script>

    </body>
</html>